<template>
    <!-- <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 -->
    <!-- to => 将Teleport插槽中的内容 传递到DOM结构外层 -->
    <!-- <teleport to='.app-header'>
        <van-nav-bar title="首页" left-text="返回" left-arrow>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
    </teleport> -->

    <!-- 使用二次封装的组件：
         teleport 组件 + vant-nav-bar组件

        teleport 组件
           to
        
        vant-nav-bar组件
            title	标题	
            left-text	左侧文案	
            right-text	右侧文案	
            left-arrow	是否显示左侧箭头	
            border	是否显示下边框	
            fixed	是否固定在顶部	
            placeholder	固定在顶部时，是否在标签位置生成一个等高的占位元素	
            z-index	导航栏 z-index	number | string	1
            safe-area-inset-top	是否开启顶部安全区适配	
            clickable	是否开启两侧按钮的点击反馈


    TelNavBar 接收的自定义事件,点击navBar左边和右边时触发
        @left="leftHandler" @right="rightHandler"
        
      -->
    <TelNavBar to=".app-header" ref="home"   left-text="左边" left-arrow right-text="搜索"  @left="leftHandler" @right="rightHandler">
        <!-- <template #left >
            aaaa
        </template> -->
        <!-- <template #title>
            bbbb
        </template> -->
        <!-- <template #right>
            cccc
        </template> -->
    </TelNavBar>

    <div>
        主页
    </div>
</template>

<script setup lang="ts">
    import { ref ,onMounted} from 'vue';
    import TelNavBar from '@/components/TelNavBar.vue';
    
    defineOptions({
        name:"HomeView",
    })

    let home = ref();

    let leftHandler = ()=>{
        console.log(111111);
    }

    let rightHandler = ()=>{
        console.log(222222);
    }

    onMounted(() => {
        console.log("home",home);
        home.value.changeCount(123123);
        
    })
</script>

<style scoped>

</style>